<template>
  <div class="employee-container">
    <div>
      <div style="float: left">
        <el-row>
          <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/layout/employee' }">网站主页</el-breadcrumb-item>
            <el-breadcrumb-item>影视资源管理</el-breadcrumb-item>
            <el-breadcrumb-item>影视资源</el-breadcrumb-item>
          </el-breadcrumb>
        </el-row>
        <br>
        <el-row><el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="搜索：">
            <el-input v-model="formInline.user" placeholder="影片名"></el-input>
          </el-form-item>
          <el-form-item label="影视分区：">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="1.番剧" value="ys1"></el-option>
              <el-option label="2.电影" value="ys2"></el-option>
              <el-option label="3.特摄" value="ys3"></el-option>
              <el-option label="4.电视" value="ys4"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        </el-row>
      </div>

    </div>
    <div style="margin-top: 45px">
      <el-table

        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :header-cell-style="{background:'hsl(199 16% 85% / .5)'}"
        :data="tableData"
        border
        stripe
        height="650"
        style="width: 100%">npm
        <el-table-column
          prop="name"
          label="片名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="thumbnail"
          label="海报"
          width="90"
          height="90">
          <template slot-scope="scope">
            <img :src="scope.row.thumbnail" min-width="80" height="80"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="time"
          label="时长">
        </el-table-column>
        <el-table-column
          prop="level"
          label="评分">
        </el-table-column>
        <el-table-column
          prop="up"
          label="作者">
        </el-table-column>
        <el-table-column
          prop="have"
          label="片源">
        </el-table-column>
      </el-table>

    </div>
  </div>

</template>

<script>
  export default {
    name: "Employee",data(){
      return{
        formInline: {
          user: '',
          region: ''
        },
        tableData:[{
          name: <el-tooltip placement="bottom">
          <div slot="content">简介：1990年，一艘巨大的飞船出现在地球上空，人们惶恐不安，却又分外好奇。<br/>经过一段时间紧张的等待，外星飞船始终没有动静...</div>
      <el-button>第九区</el-button>
      </el-tooltip>,
      time: '112:15',
        thumbnail:require('@/view/26_Employee/assets/fm1.jpg'),
        space: '电影',
        level:'4.5',
        value:"ys1",
        up:'尼尔·布洛姆坎普',
        have:<el-link href="https://www.bilibili.com/bangumi/play/ep400620?theme=movie&from_spmid=666.7" target="_blank">http://kehuanpingdao.com</el-link>
    },
      {
        name: <el-tooltip placement="bottom">
        <div slot="content">简介：一个被错误指控谋杀的精神病父亲和他可爱的六岁女儿之间的温情故事。<br/>改编自2013年韩国电影《7号房的礼物》。</div>
      <el-button>七号房的礼物</el-button>
      </el-tooltip>,
        time: '132.09',
          thumbnail:require('@/view/26_Employee/assets/fm2.jpg'),
        space: '电影',
        level:'4.0',
        value:"ys1",
        up:'梅米特·艾达·厄兹泰金',
        have:<el-link href="https://www.bilibili.com/bangumi/media/md28233767/?spm_id_from=666.25.b_6d656469615f6d6f64756c65.6"  target="_blank">http://qingqinnuanxin.com</el-link>
      },
      {
        name: <el-tooltip placement="bottom">
        <div slot="content">简介：激战之后，静止卫星射出的一道光芒提示着一种可能。<br/>悠人一行人一直在战斗的「艾多拉行星」或许并不是GBN的世界，而存在于现实之中。</div>
      <el-button>GUNDAM:BD:RI</el-button>
      </el-tooltip>,
        time: '30:20',
          thumbnail:require('@/view/26_Employee/assets/fm3.jpg'),
        space: '番剧',
        level:'5.0',
        value:'ys2',
        up:'SUNRISE',
        have:<el-link href="https://www.bilibili.com/bangumi/play/ss33060/"  target="_blank">http://GUNDAM.com</el-link>
      },
      {
        name: <el-tooltip placement="bottom">
        <div slot="content">简介：“迪迦”一词意为印度尼西亚语中神圣的数字"3"。<br/>约在三千万年前，人类处于超古代文明时期...</div>
      <el-button>迪迦奥特曼</el-button>
      </el-tooltip>,
        time: '45:00',
          thumbnail:require('@/view/26_Employee/assets/fm4.jpg'),
        space: '特摄',
        level:'6.0',
        value:"ys3",
        up:'圆谷',
        have:<el-link href="https://www.bilibili.com/bangumi/media/md28234069"  target="_blank">http://hero.com</el-link>
      },
      {
        name: <el-tooltip placement="bottom">
        <div slot="content">简介：《9号秘事》是一部英式黑色幽默悬疑喜剧。<br/>一部只有短短的几集，每一集都讲一个独立的故事。</div>
      <el-button>九号密事</el-button>
      </el-tooltip>,
        time: '15:47',
          thumbnail:require('@/view/26_Employee/assets/fm5.jpg'),
        space: '电视',
        level:'4.0',
        value:"ys4",
        up:'马特·利普西',
        have:<el-link href="https://www.bilibili.com/bangumi/play/ss38558?spm_id_from=333.851.b_62696c695f7265706f72745f74656c65706c6179.40"  target="_blank">http://no.9.com</el-link>
      }
    ],
      loading: false,

        methods: {
        onSubmit() {
          console.log('submit!');
        }
      },
      url: '/static/tx.jpg',
        drawer: false,
        innerDrawer: false,
        value1: true,
        value7:35,
        value8:65,
    }
    }

  }</script>

<style scoped>
  .employee-container{
    margin-top: 30px;
    margin-left: 15px;
  }
  .el-button{
    margin-right: 10px;

    width:100%;
  }

  .image {
    width: 180px;
    display: block;
  }

  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
</style>

